<template>
  <view style="height: 100vh;">
    <layout a_icon="true" index="/pages/scm/index/index">
      <div class="carbon-menu-container">
        <!-- 菜单标题 -->
        <div class="carbon-header">
          <img src="@/static/images/img/222.jpg" class="leaf-icon" alt="双碳图标">
          <h2>双碳管理系统</h2>
        </div>
        <!-- 菜单主体 -->
        <van-collapse v-model="activeNames" accordion>
          <!-- 采购管理 -->
          <van-collapse-item name="1" title="采购管理">
            <van-cell 
              v-for="item in purchaseItems" 
              :key="item"
              :title="item" 
              class="sub-menu-item"
              @click="handleMenuClick(item)"
            />
          </van-collapse-item>
          <!-- 销售管理 -->
          <van-collapse-item name="2" title="销售管理">
            <van-cell 
              v-for="item in salesItems" 
              :key="item"
              :title="item" 
              class="sub-menu-item"
              @click="handleMenuClick(item)"
            />
          </van-collapse-item>
          <!-- 采购报表 -->
          <van-collapse-item name="3" title="采购报表">
            <van-cell 
              v-for="item in purchaseReportItems" 
              :key="item"
              :title="item" 
              class="sub-menu-item"
              @click="handleMenuClick(item)"
            />
          </van-collapse-item>
          <!-- 销售报表 -->
          <van-collapse-item name="4" title="销售报表">
            <van-cell 
              v-for="item in salesReportItems" 
              :key="item"
              :title="item" 
              class="sub-menu-item"
              @click="handleMenuClick(item)"
            />
          </van-collapse-item>
          <!-- 财务管理 -->
          <van-collapse-item name="5" title="财务管理">
            <van-cell 
              v-for="item in financeItems" 
              :key="item"
              :title="item" 
              class="sub-menu-item"
              @click="handleMenuClick(item)"
            />
          </van-collapse-item>
          <!-- 统计分析 -->
          <van-collapse-item name="6" title="统计分析">
            <van-cell 
              v-for="item in analysisItems" 
              :key="item"
              :title="item" 
              class="sub-menu-item"
              @click="handleMenuClick(item)"
            />
          </van-collapse-item>
        </van-collapse>
      </div>
    </layout>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { Collapse, CollapseItem, Cell } from 'vant';

// 菜单数据
const purchaseItems = ['供应商', '采购计划', '采购申请', '采购合同', '采购到货', '采购退货'];
const salesItems = ['客户档案', '销售计划', '销售订单', '销售合同', '销售发货', '销售退货'];
const purchaseReportItems = ['产品统计', '采购入库统计', '退货统计'];
const salesReportItems = ['订单统计', '发退货统计', '销售台账'];
const financeItems = ['收支统计', '供应商对账', '客户对账'];
const analysisItems = [
  '订单收款统计',
  '采购付款统计',
  '销售发货退货统计',
  '采购入库退货报表',
  '销售计划达成率报表'
];

const activeNames = ref([]);

// 处理菜单点击事件
const handleMenuClick = (menuName) => {
  console.log('点击菜单:', menuName);

  // 定义菜单与页面路径的映射关系
  const pageRoutes = {
    '供应商': '/pages/scm/purchase/supplier/index',
    '采购计划': '/pages/scm/purchase/plan/index',
    '采购申请': '/pages/scm/purchase/apply/index',
    '采购合同': '/pages/scm/purchase/contract/index',
    '采购到货': '/pages/scm/purchase/arrive/index',
    '采购退货': '/pages/scm/purchase/return/index',
    '客户档案': '/pages/scm/sale/customer/index',
    '销售计划': '/pages/scm/sale/plan/index',
    '销售订单': '/pages/scm/sale/order/index',
    '销售合同': '/pages/scm/sale/contract/index',
    '销售发货': '/pages/scm/sale/delivery/index',
    '销售退货': '/pages/scm/sale/return/index',
    '产品统计': '/pages/scm/purchaseReport/material/index',
    '采购入库统计': '/pages/scm/purchaseReport/purchaseArriveDetailReport/index',
    '退货统计': '/pages/scm/purchaseReport/return/index',
    '订单统计': '/pages/scm/saleReport/contractDetail/index',
    '发退货统计': '/pages/scm/saleReport/saleDeliveryDetailReport/index',
    '销售台账': '/pages/scm/saleReport/saleBookReport/index',
    '收支统计': '/pages/scm/Financial-Management/financeReport/index',
    '供应商对账': '/pages/scm/Financial-Management/supplierBook/index',
    '客户对账': '/pages/scm/Financial-Management/saleContractReport/index',
    '订单收款统计': '/pages/scm/Analytics/orderStatReport/index',
    '采购付款统计': '/pages/scm/Analytics/purchaseContractReport/index',
    '销售发货退货统计': '/pages/scm/Analytics/salePlanDetailReport/index',
    '采购入库退货报表': '/pages/scm/Analytics/contractArriveReturnReport/index',
    '销售计划达成率报表': '/pages/scm/Analytics/contractDeliveryReturnReport/index'
  };

  // 获取对应页面路径
  const pageUrl = pageRoutes[menuName];
  if (pageUrl) {
    uni.navigateTo({
      url: pageUrl
    });
  } else {
    console.warn(`未定义 ${menuName} 的跳转路径`);
  }
};
</script>

<style scoped>
.carbon-menu-container {
  background: white;
  min-height: 100vh;
  padding: 12px;
}
.carbon-header {
  display: flex;
  align-items: center;
  padding: 20px 15px;
  background: #2a9d8f;
  border-radius: 8px;
  margin-bottom: 15px;
  color: white;
}
.carbon-header h2 {
  margin: 0;
  margin-left: 15px;
  font-size: 1.2rem;
}
.leaf-icon {
  width: 28px;
  height: 28px;
}
/* 折叠面板样式重写 */
:deep(.van-collapse-item__content) {
  background-color: #e9f5f2 !important;
  padding: 0;
}
:deep(.van-collapse-item__title) {
  background-color: #76c893 !important;
  color: white !important;
  font-weight: bold;
}
.sub-menu-item {
  background: #ffffff90;
  margin: 2px 0;
  border-radius: 6px;
  font-size: 14px;
}
</style>